import { Form, Switch } from "antd";
import {useEffect} from 'react';

import {
  titleRender,isInline,
  fieldRender,checkRender,
  descRender,tipRender,
  fieldPermissionsRender,
  spanWidthRender
} from '@/components/ComponentConfig/commonItem';

type PropsType ={
  config:any,
  onChangeCallback:Function
}

const Config = (props:PropsType) => {
  const {config} = props;
  const [form] = Form.useForm();

  useEffect(()=>{
    form.setFieldsValue({...config});
  },[config])

  const onValuesChange = (changeValue: any, allValue:any) =>{
    for(let k in changeValue) {
      config[k] = allValue[k]
    }
    props.onChangeCallback(config);
  }

  return (
    <div>
       { titleRender(config,props,'title')}
      { fieldRender(config,props,'field')}
      { descRender(config,props,'describe')}

      <Form form={form} onValuesChange={onValuesChange} initialValues={config}>
        <Form.Item name="multiple" label="是否支持多选" valuePropName="checked">
          <Switch />
        </Form.Item>
      </Form>

      { fieldPermissionsRender(config,props,'fieldPermissions')}
      { checkRender(config,props,'check')}
      { isInline(config,props,'inline')}
      { spanWidthRender(config,props,'span')}
    </div>
    
  )
}

export default Config;
